import React, { Component } from 'react';
import Table from './Table';
import Form from './Form';
import Api from './Api';
import StrengthList from './StrengthList';
import HotFlights from './HotFlights';
import FooterBanner from './FooterBanner';
import ForwardingRef from './forwardingRef/ForwardingRef';
import ErrorBoundary from './errorBoundary/ErrorBoundary';
import BuggyCounter from './errorBoundary/BuggyCounter';
import SubscribeComponent from './highOrderComponent/SubscribeComponent';
import CommentInput from './highOrderComponent/AddComment';
import FunctionAsChildren from './jsxDeeply/FunctionAsChildren';
import ExpressionsAsChildren from './jsxDeeply/ExpressionsAsChildren';
import SpreadAttributes from './jsxDeeply/SpreadAttributes';
import DotNotation from './jsxDeeply/DotNotation';
import ChoosingTypeAtRuntime from './jsxDeeply/ChoosingTypeAtRuntime';
import ShouldNotUpdated from './performance/ShouldNotUpdated';
import ProtalModel from './portals/ProtalModel';
import MouseTracker from './renderProps/MouseTracker';

class App extends Component {
  state = {
    characters: [
        {
            'name': 'Charlie',
            // the rest of the data
            'job': 'Janitor'
        },
        {
            'name': 'Mac',
            'job': 'Bouncer'
        },
        {
            'name': 'Dee',
            'job': 'Aspring actress'
        },
        {
            'name': 'Dennis',
            'job': 'Bartender'
        }
      ]
  };

  removeCharacter = index => {
    const { characters } = this.state;

    this.setState({
        characters: characters.filter((character, i) => {
            return i !== index;
        })
    });
  }

  handleSubmit = character => {
      this.setState({characters: [...this.state.characters, character]});
  }

  render() {
      return (
          <React.Fragment>
              <ErrorBoundary>
                  {/*<ForwardingRef />*/}
                  {/*<BuggyCounter />*/}
                  {/*<CommentInput />*/}
                  {/*<SubscribeComponent />*/}
                  {/*<FunctionAsChildren />*/}
                  {/*<ExpressionsAsChildren />*/}
                  {/*<SpreadAttributes />*/}
                  {/*<DotNotation />*/}
                  {/*<ChoosingTypeAtRuntime />*/}
                  {/*<ShouldNotUpdated />*/}
                  {/*<ProtalModel />*/}
                  <MouseTracker />
              </ErrorBoundary>
         </React.Fragment>
      );
  }
}

export default App;


  
{/*<Table*/}
{/*characterData={this.state.characters}*/}
{/*removeCharacter={this.removeCharacter}*/}
{/*/>*/}
{/*<Form*/}
{/*handleSubmit={this.handleSubmit}*/}
{/*/>*/}
{/*<Api />*/}
{/*<StrengthList />*/}
{/*<HotFlights />*/}
{/*<FooterBanner />*/}